<template>
    <div class="creationPage">
      <div class="filterVue">
        <div style="display: flex">
          <!-- <div class="filter">
            <span style="padding-right: 10px">显示状态</span>
            <el-select v-model="params.status" placeholder="请选择">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div> -->
          <div class="filter">
            <div style="padding-right: 10px">问题标题</div>
            <el-input v-model="params.name" placeholder="请输入" style="margin-left: 10px; width: 190px"></el-input>
          </div>
          <div style="display: flex">
            <div class="btn1" @click="search">查询</div>
            <div class="btn1" @click="clearAll">清空</div>
          </div>
        </div>
        <div class="create" @click="dialogTableVisible=true">新增问题</div>
      </div>
      <div class="tableVue">
        <div class="tableList">
          <div class="thVue">
            <div class="th">问题标题</div>
            <div class="th">问题答案</div>
            <div class="th">更新时间</div>
            <div class="th">操作</div>
          </div>
          <div class="tdVue">
            <div class="tdItem" v-for="(item, index) in list" :key="index">
              <div class="td">{{  item.title }}</div>
              <div class="td line-1" :title="item.content">{{ item.content }}</div>
              <div class="td">{{ item.updateTime }}</div>
              <div class="td">
                <span  style="color: #389bf6; cursor: pointer; font-weight: 600; padding: 0 10px" @click="toEdit(item)">编辑</span>
                <span  style="color: #E46068; cursor: pointer; font-weight: 600; padding: 0 10px" @click="toDelete(item.id)">删除</span>
              </div>
            </div>
          </div>
          <div class="paginationVue">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="params.limit"
              @current-change="pageChange"
            ></el-pagination>
          </div>
        </div>
      </div>


      <el-dialog title="新增问题" :visible.sync="dialogTableVisible" width="500px" top="30vh" @close="close">
      <div class="dialogVue">
        <div style="display: flex; align-items: center">
          <div class="label">问题标题</div>
          <el-input style="flex: 1; margin-left: 20px" placeholder="请输入问题标题" v-model="form.title"></el-input>
        </div>
        <div style="display: flex; align-items: center; margin-top: 20px;">
          <div class="label">问题答案</div>
          <el-input type="textarea" style="flex: 1; margin-left: 20px" :rows="5" resize="none" placeholder="请输入问题答案" v-model="form.content"></el-input>
        </div>
        <div style="display: flex; align-items: center; margin-top: 20px;">
          <div class="label">问题排序</div>
          <el-input type="number" style="flex: 1; margin-left: 20px" placeholder="请输入问题排序" v-model="form.sort"></el-input>
        </div>
        <div class="btnVue">
          <div class="btn" @click="dialogTableVisible = false">取消</div>
          <div class="btn" @click="todoFun()">确定</div>
        </div>
      </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
  import { questionList, questionAdd, questionDel, questionUpdate } from "@/api/creation"
  export default {
    data() {
      return {
        statusList: [],
        params: {
          status: '',
          name: '',
          limit: 15,
          page: 1,
        },
        form: {
          content: "",
          title: "",
          sort: "",
          id: ""
        },
        list: [],
        total: 0,
        dialogTableVisible: false,
      };
    },
    created(){
      this.getList()
    },
    methods: {
      search() {
        this.params.page = 1
        this.getList()
      },
      clearAll() {
        this.params = {
          status: '',
          name: '',
          limit: 15,
          page: 1,
        }
        this.getList()
      },
      getList() {
        questionList(this.params).then(res=>{
          console.log(res)
          this.list = res.list
          this.total = res.total
        })
      },
      pageChange(e) {
        console.log(e);
        this.params.page = e;
        this.getList();
      },

      toEdit(item){
        this.form = item
        this.dialogTableVisible = true
      },

      toDelete(id){
        this.$confirm('确定删除该问题吗?', '删除问题', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          questionDel({
            id: id
          }).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            this.params.page = 1
            this.getList()
          })
        })
     },

     close(){
      this.form = {
        content: "",
          title: "",
          sort: "",
          id: ""
      }
     },

     todoFun(){
      if(this.form.id) {
        questionUpdate(this.form).then(res=>{
          this.params.page = 1
          this.getList()
          this.form = {
            content: "",
              title: "",
              sort: "",
              id: ""
          }
          this.dialogTableVisible = false
          this.$message({
            message: '修改成功',
            type: 'success',
          });
        })
      }else{
        questionAdd(this.form).then(res=>{
          this.params.page = 1
          this.getList()
          this.form = {
            content: "",
              title: "",
              sort: "",
              id: ""
          }
          this.dialogTableVisible = false
          this.$message({
            message: '新增成功',
            type: 'success',
          });
        })
      }
     },
    },
  };
  </script>
  
  
  <style lang="scss">
  .creationPage {
    width: 100%;
    height: calc(100vh - 186px);
    background: #fff;
    .filterVue {
      width: 100%;
      height: 62px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      .filter {
        display: flex;
        align-items: center;
        padding-right: 30px;
      }
      .btn1 {
        width: 60px;
        height: 32px;
        border-radius: 4px;
        line-height: 32px;
        text-align: center;
        background: #2561ef;
        color: #fff;
        margin-right: 10px;
        cursor: pointer;
      }
      .create {
        width: 80px;
        height: 32px;
        border-radius: 4px;
        line-height: 32px;
        text-align: center;
        background: #2561ef;
        color: #fff;
        margin-right: 10px;
        cursor: pointer;
      }
    }
    .tableVue {
      flex: 1;
      height: calc(100vh - 186px - 62px);
      .thVue {
        width: 100%;
        display: flex;
        height: 70px;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        .th {
          flex: 1;
          color: #333333;
          font-weight: 600;
          text-align: center;
        }
        .th:nth-last-child(1) {
          width: 250px;
        }
      }
      .tdVue {
        width: 100%;
        height: calc(100vh - 186px - 62px - 70px - 60px);
        overflow-y: scroll;
        .tdItem {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f5f5f5;
          .td {
            flex: 1;
            text-align: center;
          }
          .td:nth-last-child(1) {
            width: 250px;
          }
        }
      }
      .tdVue::-webkit-scrollbar {
        width: 0;
      }
      .paginationVue {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .dialogVue {
  padding-bottom: 30px;
  .label {
    color: #999;
  }
  ::v-deep .el-input__inner {
    height: 40px;
  }
}
.btnVue {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
  .btn {
    width: 66px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    margin-left: 15px;
    cursor: pointer;
  }
  .btn:nth-child(1) {
    color: #333;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
  }
  .btn:nth-child(2) {
    color: #fff;
    background: #0256ff;
    border-radius: 4px;
  }
}
  </style>